import React, { useState, useEffect } from 'react'
import { View, Image, Button } from '@tarojs/components'
import { AtTag, AtActivityIndicator } from 'taro-ui'
import { request, baseURL } from '../../utils/request'
import { useRequest } from 'ahooks'
import Taro from '@tarojs/taro'
import styles from './index.module.less'
import { getCurrentInstance } from '@tarojs/taro'

const getActivityFunc = (id: number) => {
  return request('get', '/app/baiyeinfo', { id })
}

const getSignFunc = (id: number) => {
  return request('get', '/app/isSign', { id })
}

const signUpFunc = (id: number) => {
  return request('post', `/app/baiye?id=${id}`, {})
}

const addSocreFunc = (id: number) => {
  return request('get', `/app/integral?id=${id}`, {})
}

const ActivityDetail: React.FC<{}> = () => {
  // @ts-ignore
  const { id } = getCurrentInstance().router.params
  const [data, setData] = useState()
  const [sign, setSign] = useState(true)
  const getActivity = useRequest(getActivityFunc, {
    manual: true,
    onSuccess: d => {
      // @ts-ignore
      setData(d)
    }
  })
  const getSign = useRequest(getSignFunc, {
    manual: true,
    onSuccess: d => {
      // @ts-ignore
      setSign(d)
    }
  })
  const signUp = useRequest(signUpFunc, {
    manual: true,
    onSuccess: d => {
      getSign.refresh()
    }
  })
  useEffect(() => {
    // @ts-ignore
    getActivity.run(id)
    // @ts-ignore
    getSign.run(id)
  }, [])

  const addScore = () => {
    Taro.scanCode({
      onlyFromCamera: true,
      // @ts-ignore
      scanType: "qrCode",
      success: (res) => {
        const { result } = res
        const id = Number(result)
        addSocreFunc(id).then(res => {
          if (res) return
          Taro.showToast({
            title: '加分成功',
            icon: 'none'
          })
        })
      },
      fail: () => { }
    })
  }
  return (
    <View className={styles.activeDetail}>
      {
        data ? <View className='at-article'>
          <View className='at-article__h1'>
            {/**@ts-ignore */}
            {data.activityName}
          </View>
          <View className='at-article__info'>
            {/**@ts-ignore */}
            {data.enrollmentOfPeople}人/{data.numberOfPeople}人&nbsp;
          {/**@ts-ignore */}
            {data.score}分&nbsp;
          {/**@ts-ignore */}
            <AtTag size='small' type='primary' active circle>{data.activityBlockValue}</AtTag>&nbsp;
          {/**@ts-ignore */}
            {sign ? <AtTag size='small' type='primary' active circle>已报名</AtTag> : <AtTag size='small' type='primary' active circle>{data.state}</AtTag>}

          </View>
          <View className='at-article__content' style={{ marginTop: '15px' }}>
            <View className='at-article__section'>
              <View className='at-article__p' style={{ fontSize: '12px !important', marginTop: ' -4px' }}>
                {/**@ts-ignore */}
              报名时间：{data.enrollStartTime} ~ {data.enrollEndTime}
              </View>
              <View className='at-article__p' style={{ fontSize: '12px !important', marginTop: ' -4px' }}>
                {/**@ts-ignore */}
              活动时间：{data.startTime} ~ {data.endTime}
              </View>
              <View className='at-article__p'>
                {/**@ts-ignore */}
                {data.content}
              </View>
              {/**@ts-ignore */}
              {data.picture && <Image
                className='at-article__img'
                // @ts-ignore
                src={`${baseURL}${data.picture}`}
                mode='widthFix' />}
            </View>
            {/**@ts-ignore */}
            {(!sign && data.state === '报名中') && <Button className={styles.button} type="primary" onClick={() => signUp.run(Number(data.id))}>报 名</Button>}
            {(sign) && <Button className={styles.button} type="primary" onClick={addScore}>扫码加分</Button>}
          </View>
        </View> :
          <View className={styles.loading}> <AtActivityIndicator color='#13CE66' size={50} content='加载中...' mode='center'></AtActivityIndicator>
          </View>
      }
    </View>
  )
}

export default ActivityDetail